<template>
	<view>
        <view class="u-page">
		<luyj-tree-navigation 
			slabel="name"
			allName="根目录"
			:isIre="false"
			@inF="navigationInt"
			@clickItem="backTree"></luyj-tree-navigation>
        </view>

        <view class="list-area">
        	<view class="listItem" v-for="(item, index) in list" :key="index" @click.prevent="showDetailCommon(item)">
        		<view class="item-icon" v-if="item.__icon">
        			<image :src="item.__icon" />
        		</view>
        		<view class="item-right">
        			<view class="lenMain">
						<view class="mainTitle">{{item.netFileName}}</view>
					</view>
        			<view class="lens">
        				<view class="len">
        					<view class="fieldItem">
        						<view class="k">创建者：</view>
        						<view class="v">{{item.userId}}</view>
        					</view>
							<view class="fieldItem">
        						<view class="k">更新时间：</view>
        						<view class="v">{{item.dateModified}}</view>
        					</view>
        				</view>
        			</view>
        		</view>
        	</view>

			<u-empty mode="data" v-if="!list.length"></u-empty>
			<u-action-sheet :actions="actions" :show="showActionSheet"
				:closeOnClickAction="true" :closeOnClickOverlay="true"
				@select="actionSelectClick"></u-action-sheet>
        </view>

        <mytabbar></mytabbar>
	</view>
</template>

<script>
	import mytabbar from '@/components/tabbar/index.vue';
	import {mapState, mapMutations} from 'vuex';
	import Base64 from 'base-64';
	// import luyjTreeNavigation from '@/uni_modules/luyj-tree/components/luyj-tree-navigation/luyj-tree-navigation.vue'
	export default {
		components: {
            mytabbar: mytabbar,
			// luyjTreeNavigation
        },
		data() {
			return {
				list: [],
				showActionSheet: false,
				actions: [],
				// 导航条
				setIsre: null, // 导航条方法 - 设置是否搜索中方法
				getIsre : null,	// 获取是否搜索中
				setTreeStack: null, // 导航条 - 设置导航
				concatTreeStack: null, // 导航条 - 拼接当前导航对象
				clearTreeStack: null, // 导航条- 清空导航条
				getTreeStack: null, // 导航条 - 获取导航条
			}
		},
		computed: {
			...mapState(['globalConfig'])
		},
		onLoad(options) {
			this.pageOptions = options;
            this.doWxLogin().then(res => {
                this.openId = res.openId;
				// this.pushTreeStack({name: '/'});
				this.loadPackage();
            })
		},
		options: { styleIsolation: 'shared' },
		methods: {
			loadPackage: function (path = '/') {
				var vm = this;
				vm.getAndLoad('文件夹', '/mobile/oa/netFile/list.jsp?path=' + path, function (data) {
					if (data.list) {
						data.list.forEach(n => {
							n.__icon = n.type == '文件夹' ? '/static/imgs/fileIcons/pkg.png' : vm.getFileIcon(n.netFileName);
						});
						vm.list = data.list;
					} else {
						vm.list = [];
					}
				});
			},
			showDetailCommon: function (item) {
				var vm = this;
				if (item.type == '文件夹') {
					vm.pushTreeStack({name: item.netFileName, origin: item});
					vm.loadPackage(item.path + item.netFileName);
				} else {
					vm.targetFile = item;
					let index = item.netFileName.lastIndexOf('.');
      				var text = item.netFileName.substr(index + 1);
					/*
					vm.actions = [
						{ name: '预览', disabled: !(['jpg', 'png', 'gif', 'jpeg'].includes(text) || ['doc','docx','xls','xlsx','ppt','pptx','pdf'].includes(text))},
						{ name: '下载'}
					];
					vm.showActionSheet = true;
					*/
					vm.actionSelectClick({ name: '预览'});
				}
			},
			actionSelectClick: function (action) {
				var vm = this;
				var filename = vm.targetFile.netFileName;
				let index = filename.lastIndexOf('.');
				var enfix = filename.substr(index + 1);
				var isImage = ['jpg', 'png', 'gif', 'jpeg'].includes(enfix);
				var isDoc = ['doc','docx','xls','xlsx','ppt','pptx','pdf'].includes(enfix);
				if (!isImage && !isDoc) {
					uni.$u.toast('该类型文件小程序不支持打开或下载');
					return;
				}
				uni.showLoading();
				var filePath = vm.API_PREFIX + "/mobile/oa/download.jsp?fileType=attach&id=" + vm.targetFile.netFileId;
				if (vm.globalConfig.fileReaderH5) {
					vm.gotoH5Page(vm.globalConfig.fileReaderH5 + encodeURIComponent(Base64.encode(filePath)));
				} else {
					uni.downloadFile({
						url: filePath, 
						header: {'Cookie': uni.getStorageSync('loginCookie')},
						success: (res) => {
							uni.hideLoading();
							if (res.statusCode === 200) {
								// 使用uni.saveFile获取文件临时路径
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: function (save) {
										if (isDoc && action.name == '预览') {
											uni.openDocument({
												filePath: save.savedFilePath,
												fileType: enfix,
												showMenu: true,
												success: function (open) {
													console.log(open)
												}
											})
										} else if (isImage && action.name == '预览') {
											uni.previewImage({
												urls: [save.savedFilePath],
												current: 0
											})
										}
									}
								})
							}
						}
					});
				}
			},
			getFileIcon: function (filename = '') {
        		var fileType = filename.replace(/.+\./, "");
        		var iconPackagesPrefix = '/static/imgs/fileIcons/';
        		var iconMap = {
        			"aep":"aep.png","ai":"ai.png","avi":"avi.png","cdr":"cdr.png","css":"css.png",
        			"doc":"doc.png", "docx":"doc.png","ppt":"ppt.png","pptx":"ppt.png",
        			"xls":"xls.png", "xlsx":"xls.png",
        			"eps":"eps.png","gif":"gif.png","html":"html.png","jpeg":"jpeg.png",
        			"mov":"mov.png","mp3":"mp3.png","new":"new.png","pdf":"pdf.png","php":"php.png",
        			"png":"png.png","psd":"psd.png","rar":"rar.png",
        			"ttf":"ttf.png","txt":"txt.png","url":"url.png","zip":"zip.png"
        		};
        		if (iconMap[fileType]) {
        			return iconPackagesPrefix + iconMap[fileType];
        		} else {
        			return iconPackagesPrefix + 'new.png';
        		}
        	},
			navigationInt: function(e) {
				this.setIsre = e.setIsre;
				this.getIsre = e.getIsre;
				this.concatTreeStack = e.concatTreeStack;
				this.pushTreeStack = e.pushTreeStack;
				this.clearTreeStack = e.clearTreeStack;
				this.getTreeStack = e.getTreeStack;
			},
			backTree(item, index) {
				if (index == -1) {
					this.loadPackage();
				} else {
					this.loadPackage(item.origin.path + item.origin.netFileName);
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.list-area {
	background: #fff;
	position: relative;
    &.card {
        background: unset;
        .listItem {
            border-radius: 20rpx;
            margin: 20rpx 30rpx 20rpx;
            padding: 20rpx 30rpx 15rpx 30rpx;
            border-bottom: unset;
			.item-right {
				width: 100%;
				.lenMain .mainTitle {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
            .v {
                color: #676767;
            }
        }
    }
	.disableBlock {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.4;
		padding-bottom: 120px;
    	box-sizing: content-box;
	}
	.listItem {
		background: #fff;
		padding: 20rpx 10rpx 15rpx 10rpx;
		border-bottom: 1px solid #ECECEC;
		box-sizing: border-box;
		margin: 0 10rpx 5rpx;
		display: flex;

		.item-icon  {
			min-width: 100rpx;
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.item-right {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			.lenMain  {
				display: flex;
				line-height: 50rpx;
				/deep/ .u-tag-wrapper {
					margin-right: 10rpx;
					.u-tag--medium {
						height: 22px;
						line-height: 20px;
						padding: 0 4px;
					}
				}
				.mainTitle {
					font-size: 32rpx;
					color: #414141;
					@include overfloewEllipsis(1);
					flex-grow: 1;
				}
				.titleTag {
					background: #eef5fd;
					color: #5890dc;
					padding: 0 10rpx;
					font-size: 26rpx;
					height: 44rpx;
					line-height: 44rpx;
					white-space: nowrap;
					margin-left: auto;
				}
			}
			.lens {
				display: flex;
				flex-direction: column;
				.len {
					display: flex;
					.fieldItem {
						display: flex;
						align-items: center;
						color: #BEBEBE;
						line-height: 46rpx;
						font-size: 26rpx;
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						.k {
    						// margin-right: 10rpx;
						}
						.v {
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		.buttons {
			height: 70rpx;
			display: flex;
			align-items: center;
			margin: 0 0 0 auto;
			&.mul {
				width: 100%;
				justify-content: space-evenly;
			}
			.button {
				margin: 0 30rpx 0 -10rpx;
			}
		}
	}
}
</style>

